<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="app">
    <div class="headerheader">
      <div class="headermast">
        <i></i>
        <h1 class="headh1">火山引擎---即梦AI---API调用示例</h1>
      </div>
      <div class="youbuten">
        <!-- <span><i class="iconfont icon-download"></i></span> -->
        <el-radio-group v-model="isCollapse">
          <span @click="isCollapse = !isCollapse" :label="isCollapse">
            <i class="iconfont icon-category"></i
          ></span>
        </el-radio-group>
      </div>
    </div>
    <div class="main">
      <Menu/>
      <textarea
        v-model="inputMessage"
        placeholder="请输入消息"
        rows="3"
        @keyup.enter="sendMessage"
        @input="inputTextarea"
        @keydown="handleKeyDown"
      ></textarea>
      <el-button type="primary" @click="shengchengceshiApi"
        >生成测试API</el-button
      >
      <div>
        <el-table
          :data="addSuccessList"
          height="350"
          border
          style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column prop="task_id" label="task_id" width="180">
          </el-table-column>
          <el-table-column prop="message" label="状态" width="180">
          </el-table-column>
          <el-table-column prop="request_id" label="request_id">
          </el-table-column>
          <el-table-column prop="time_elapsed" label="time_elapsed">
          </el-table-column>
        </el-table>
      </div>
      <el-button type="primary" @click="chaxunceshiApi">查询测试API</el-button>
      <div style="height: 170px">
        <span style="display: block; white-space: normal; word-wrap: break-word"
          >查询结果 ：{{
            videoCode === 10000 ? " 查询完成" : " 查询有误"
          }}</span
        >
        <span style="display: block; white-space: normal; word-wrap: break-word"
          >视频地址 ：{{
            videoURL ? ` 查询到${videoURL}` : " 未查询到视频地址"
          }}</span
        >
        <el-button v-if="videoURL" type="primary" @click="openNewPage"
          >查看视频</el-button
        >
      </div>
    </div>

    <div class="footer">
      <div class="footerleft">
        <span>© 火山引擎---即梦AI---API调用示例</span>
      </div>
      <div>
        <span>© rtdl</span>
      </div>
    </div>
  </div>
</template>

<script>
import { postjimengVideoMake } from "@/api/kelingconfig";
import { backToTop } from "@/directives/back-to-top";
import Menu from '@/components/menu.vue';
export default {
  components: {Menu},
  directives: {
    backToTop,
  },
  data() {
    return {
      videoURL: "",
      isCollapse: true,
      videoCode: 0,
      addSuccessList: [
        {
          task_id: "1903917803013759311",
          message: "成功",
          request_id: 0,
          time_elapsed: 1,
        },
        {
          task_id: "6950960437429368617",
          message: "成功",
          request_id: 0,
          time_elapsed: 1,
        },
      ],
      chaxuntask_id: "",
      inputMessage: "",
      isDisabled: false,
      addFail: {
        task_id: new Date(),
        message: "失败",
        request_id: "0",
        time_elapsed: "0",
      },
    };
  },
  methods: {
    openNewPage() {
      if (this.videoURL) {
        window.open(this.videoURL);
      }
    },
    sendMessage() {
      if (this.inputMessage.trim()) {
        this.shengchengceshiApi();
        this.inputMessage = "";
      }
    },
    inputTextarea(val) {
      console.log(val.target.value, "val", this.inputMessage);
      if (this.inputMessage.length >= 1) {
        this.isDisabled = false;
      }
    },
    handleKeyDown(event) {
      if (event.key === "Enter" && this.inputMessage.trim() === "") {
        event.preventDefault();
        this.$refs.tooltipRef.show();
      }
    },
    shengchengceshiApi() {
      let pamas = {
        req_key: "jimeng_vgfm_t2v_l20",
        prompt: this.inputMessage,
      };
      postjimengVideoMake("CVSync2AsyncSubmitTask", "2022-08-31", pamas)
        .then((res) => {
          console.log(res);
          let listd = {
            task_id: res.data.task_id,
            message: "成功",
            request_id: res.request_id,
            time_elapsed: res.time_elapsed,
          };
          this.addSuccessList.push(listd);
        })
        .catch((err) => {
          console.log(err, "rrrrrrr");
          this.addSuccessList.push(this.addFail);
        });
    },
    handleCurrentChange(val) {
      console.log(val, "asdada");
      this.chaxuntask_id = val.task_id;
      this.chaxunceshiApi();
    },
    chaxunceshiApi() {
      if (this.chaxuntask_id) {
        let pamas = {
          req_key: "jimeng_vgfm_t2v_l20",
          task_id: this.chaxuntask_id,
        };
        postjimengVideoMake("CVSync2AsyncGetResult", "2022-08-31", pamas)
          .then((res) => {
            console.log(res, "cahxun");
            this.videoURL = res.data.video_url;
            this.videoCode = res.code;
          })
          .catch((err) => {
            console.log(err, "rrrrrrr");
          });
      } else {
        return;
      }
    },
    onVideoLoaded() {
      console.log("视频加载成功");
      // 可以在这里尝试播放视频
      this.$refs.video1.play().catch((error) => {
        console.error("播放失败:", error);
      });
    },

    onVideoError() {
      const videoElement = this.$refs.video1;
      console.error("视频加载错误:", videoElement.error);
      // 显示友好的错误信息
      this.showVideoError = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/styles/jimengceshi.scss";
</style>